<template>
   <div class="flex">
      <div class="title flex"  v-if="ContentTitle && ContentState!=0" >{{ContentTitle || 'Title Error'}}</div>
      <el-empty v-if="ContentState==0" description="快找个人聊天吧"></el-empty>
      <ChatMessage v-if="ContentState==1"  class="box"/>
      <FriendRecord v-if="ContentState==2" class="box"/>
   </div>
</template>
<script>
import { mapState } from 'vuex'
import ChatMessage from './ChatMessage/ChatMessage.vue'
import FriendRecord from './FriendRecord/FriendRecord.vue'
  export default 
  {
    components: { FriendRecord, ChatMessage},
     name :'', 
     computed:{
       //0:空状态 1:消息 2:联系人 3:个人资料
      ...mapState('Chat',['ContentState','ContentTitle'])
     }
  }
</script>
<style scoped lang='less'>
.title{
   width: 100%;
   height: 50px;
   background: var(--GeneralBackColor);

   // justify-content: flex-start;

   padding: 0 10px;
   box-sizing: border-box;
   
   letter-spacing: 0;

   font-size: 20px;
   font-weight: 600;
   color: white;
}
.box{
   width: 100%;
   height: calc(100% - 50px);
   overflow: hidden;
   position: relative;
}
</style>